import logo from '@/assets/logo.png';
import { useSiderCollapsed } from '@/store/settingsStore.ts';
import { createStyles } from 'antd-style';

const useStyle = createStyles(({ css }) => {
  return {
    title: css`
      color: var(--ycx-font-color-l1);

      /* 14/CN-Regular */
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 22px; /* 157.143% */
    `,
  };
});

const Header = () => {
  const collapsed = useSiderCollapsed();
  const { styles } = useStyle();
  return (
    <div className="mb-6 flex select-none flex-col items-center gap-2">
      <img
        src={logo}
        alt="logo"
        width={56}
        className={`${collapsed ? 'rounded-xl' : 'rounded-2xl'}`}
      />
      {!collapsed && <span className={styles.title}>智能养护管理工作台</span>}
    </div>
  );
};

export default Header;
